import 'package:flutter/material.dart';

enum SearchBarType {
  home,
  normal,
  homeLight
} // 自定义的枚举类型，首页搜索，首页高亮的搜索，搜索的页面的普通样式

// 自定义的搜索组件
class SearchBar extends StatefulWidget {
  final bool enabled; //是否禁止搜索
  final bool hideLeft; // 是否隐藏左边的返回按钮
  final SearchBarType searchBarType; // searchBar的类型，自定义的枚举
  final String hint; //默认的提示文案，placeholder
  final String defaultText; //默认的文字
  final void Function() leftButtonClick; //左边按钮的点击回调
  final void Function() rightButtonClick; //右边按钮的点击回调
  final void Function() speakClick; //话筒图标按钮的点击回调
  final void Function() inputBoxClick; //输入框（首页，输入框是假的，只是一个样子）点击的回调
  final ValueChanged<String> onChanged; //输入内容变化的一个回调

  const SearchBar(
      {Key key,
      this.enabled = true,
      this.hideLeft,
      this.searchBarType = SearchBarType.normal,
      this.hint,
      this.defaultText,
      this.leftButtonClick,
      this.rightButtonClick,
      this.speakClick,
      this.inputBoxClick,
      this.onChanged})
      : super(key: key);

  @override
  _SearchBarState createState() => _SearchBarState();
}

class _SearchBarState extends State<SearchBar> {
  bool showClear = false; //自定义是否显示清除的按钮
  // 可以通过这个controller动态的获取输入框中文字的变化
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    if (widget.defaultText != null) {
      setState(() {
        _controller.text = widget.defaultText;
      });
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return widget.searchBarType == SearchBarType.normal
        ? _genNormalSearch()
        : _genHomeSearch();
  }

// 首页的searchBar
  _genHomeSearch() {
    return Container(
      child: Row(
        children: <Widget>[
          _wrapTap(
              Container(
                padding: EdgeInsets.fromLTRB(6, 5, 5, 5),
                child: Row(
                  children: <Widget>[
                    Text(
                      '上海',
                      style: TextStyle(color: _homeFontColor(), fontSize: 14),
                    ),
                    Icon(Icons.expand_more, color: _homeFontColor(), size: 22)
                  ],
                ),
              ),
              widget.leftButtonClick),
          // 中间输入框
          Expanded(
            flex: 1,
            child: _inputBox(),
          ),
          _wrapTap(
              Container(
                padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                child: Icon(
                  Icons.comment,
                  color: _homeFontColor(),
                  size: 26,
                ),
              ),
              () {})
        ],
      ),
    );
  }

  // 搜索页的searchBar
  _genNormalSearch() {
    // widget?.hideLeft??false? null : Icon(Icons.navigate_before)
    // 判断widget中的hideLeft是否存在，并设置一个默认值false,不存在设置为null,存在就设置为返回的Icon
    return Container(
      child: Row(
        children: <Widget>[
          // 左边的返回按钮
          _wrapTap(
              Container(
                padding: EdgeInsets.fromLTRB(6, 5, 10, 5),
                child: widget?.hideLeft ?? false
                    ? null
                    : Icon(
                        Icons.navigate_before,
                        color: Colors.grey,
                        size: 26,
                      ),
              ),
              widget.leftButtonClick),
          // 中间输入框
          Expanded(
            flex: 1,
            child: _inputBox(),
          ),
          // 右边的搜索按钮
          _wrapTap(
              Container(
                padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                child: Text('搜索',
                    style: TextStyle(color: Colors.blue, fontSize: 17)),
              ),
              widget.rightButtonClick)
        ],
      ),
    );
  }

  // 包裹，获取用户的手势，并回调
  _wrapTap(Widget child, void Function() callback) {
    return GestureDetector(
      child: child,
      onTap: () {
        if (callback != null) {
          callback();
        }
      },
    );
  }

  // 输入框的实现
  _inputBox() {
    Color inputBoxColor;
    if (widget.searchBarType == SearchBarType.home) {
      inputBoxColor = Colors.white;
    } else {
      inputBoxColor = Color(int.parse('0xffEDEDED'));
    }

    return Container(
      height: 30,
      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
      decoration: BoxDecoration(
          color: inputBoxColor,
          borderRadius: BorderRadius.circular(
              widget.searchBarType == SearchBarType.normal ? 5 : 15)),
      child: Row(
        children: <Widget>[
          // 左边的搜索小图标
          Icon(Icons.search,
              size: 20,
              color: widget.searchBarType == SearchBarType.normal
                  ? Color(int.parse('0xffA9A9A9'))
                  : Colors.blue),
          // 中间的搜索框
          Expanded(
            flex: 1,
            child: widget.searchBarType == SearchBarType.normal
                ? TextField(
                    controller: _controller,
                    onChanged: _onCahanged,
                    autofocus: true,
                    style: TextStyle(
                        fontSize: 18.0,
                        color: Colors.black,
                        fontWeight: FontWeight.w300),
                    // 输入文本的样式，背景色之类的
                    decoration: InputDecoration(
                        contentPadding:EdgeInsets.only(left:5,bottom:15,right:5),
                        border: InputBorder.none,
                        hintText: widget.hint ?? '',
                        hintStyle: TextStyle(fontSize: 15)),
                  )
                : _wrapTap(
                    //首页的输入框是个假的输入框，只是一个样式
                    Container(
                      child: Text(widget.defaultText,
                          style: TextStyle(fontSize: 13, color: Colors.grey)),
                    ),
                    widget.inputBoxClick),
          ),
          // 右侧的语音小图标，或清除X图标
          !showClear
              ? _wrapTap(
                  Icon(
                    Icons.mic,
                    color: widget.searchBarType == SearchBarType.normal
                        ? Colors.blue
                        : Colors.grey,
                  ),
                  widget.speakClick)
              : _wrapTap(
                  Icon(
                    Icons.clear,
                    size: 22,
                    color: Colors.grey,
                  ), () {
                  setState(() {
                    _controller.clear();
                  });
                  _onCahanged('');
                })
        ],
      ),
    );
  }

  // 搜索框的onChange方法
  void _onCahanged(String value) {
    if (value.length > 0) {
      //输入框有值就显示清除按钮
      setState(() {
        showClear = true;
      });
    } else {
      //没有值就显示小话筒按钮
      setState(() {
        showClear = false;
      });
    }

    // 及时的调用onChange的回调，告诉外面输入框的变化
    if (widget.onChanged != null) {
      widget.onChanged(value);
    }
  }

  // 首页背景的前景色
  _homeFontColor() {
    // 是否高亮，高亮就是黑色，否则就是白色
    return widget.searchBarType == SearchBarType.homeLight
        ? Colors.black54
        : Colors.white;
  }
}
